<template>
	<view class="container">
		<!-- <view class="login">
			<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
			<button type="primary" class="btn-login" @click="getUserInfo">一键登录</button>
			<text class="tips-text">登录后尽享更多权益</text>
		</view> -->
		<view class="userinfo">
			<view class="user-box">
				<image src="../../static/logo.png" mode=""></image>
				<view class="user-name">张三</view>
			</view>


			<view class="panlist">
				<view class="pan">
					<text>8</text>
					<text>收藏的店铺</text>
				</view>
				<view class="pan">
					<text>8</text>
					<text>收藏的商品</text>
				</view>
				<view class="pan">
					<text>8</text>
					<text>关注的商品</text>
				</view>
				<view class="pan">
					<text>8</text>
					<text>足迹</text>
				</view>
				<view class="pan">
					<text>8</text>
					<text>我的订单</text>
				</view>
				<view class="pan">
					<text>8</text>
					<text>我的优惠券</text>
				</view>
			</view>


			<view class="pannav">
				<view class="pannav-item">
					<view class="text">
						收货地址
					</view>
					<view class="icon">

					</view>
				</view>
				<view class="pannav-item">
					<view class="text">
						联系我们
					</view>
					<view class="icon">

					</view>
				</view>
				<view class="pannav-item">
					<view class="text">
						关于
					</view>
					<view class="icon">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
			font-size: 30rpx;
	}

	.login {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.btn-login {
			width: 80%;
			border-radius: 100px;
			margin: 15px 0;
			font-size: 20rpx;
		}

		.tips-text {
			font-size: 20rpx;
			color: gray;
		}
	}


	.userinfo {
		.user-box {
			height: 200rpx;
			background-color: #55aaff;
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 2px solid #FFF;
				box-shadow: 0 1px 5px black;
			}

			.user-name {
				padding-left: 20rpx;
				font-size: 30rpx;
				color: #FFF;
			}
		}

		.panlist {
			position: relative;
			margin: 0 30rpx;
			top: -30rpx;
			height: 300rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			border-radius: 40rpx;
			border: 1rpx solid #f4f4f4;
			box-shadow: 0 1px 5px black;

			.pan {
				width: 30%;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.pannav {
			margin: 0 30rpx;
			height: 150rpx;
			background-color: #fff;
			border: 1rpx solid #f4f4f4;
			border-radius: 30rpx;
			box-shadow: 0 1px 5px black;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 10rpx;


			.pannav-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.icon {
					width: 20rpx;
					height: 20rpx;
					border-top: 2px solid;
					border-right: 2px solid;
					border-color: #ccc;
					transform: rotate(45deg);
					margin-right: 20rpx;
				}
			}
		}

	}
</style>